<template>
	<div>
		<div class="topTitle">试题题型</div>
		<div class="container">
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-edit" class="handle-del mr10" @click="[editVisible = true,form={}]"
					style="float:right">新增
				</el-button>
				<el-input v-model="query.name" placeholder="题型名称" class="handle-input mr10"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
				<el-button type="default" icon="el-icon-refresh-right" @click="handleRefresh">重置</el-button>
			</div>
			<el-tabs v-model="activeName" @tab-click="tabClick">
				<el-tab-pane label="试题题型" name="first"></el-tab-pane>
				<el-tab-pane label="子试题题型" name="second"></el-tab-pane>
			</el-tabs>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
				<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
				<el-table-column prop="name" label="题型名称" align="center"></el-table-column>
				<el-table-column prop="name" label="描述" align="center"></el-table-column>
				<el-table-column prop="sort" label="排序" align="center"></el-table-column>
				<el-table-column label="操作" width="180" align="center" v-if="activeName=='first'">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
						</el-button>
						<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 	<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :page-sizes="[10, 20, 30, 40]"
					@size-change="handleSizeChange" :current-page="query.pageNumber" :total="pageTotal"
					@current-change="handlePageChange"></el-pagination>
			</div> -->
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" :visible.sync="editVisible" width="30%">
			<el-form ref="form" :model="form" label-width="70px">
				<el-form-item label="ID">
					<el-input v-model="form.id" value="row.id" disabled></el-input>
				</el-form-item>
				<el-form-item label="题型名称">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="排序">
					<el-input v-model="form.sort"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="addQuestionSort()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'categoryTable',
		data() {
			return {
				query: {
					name: '',
					type: 1,
					pageNumber: 1,
					pageSize: 10
				},
				tableData: [],
				multipleSelection: [],
				delList: [],
				editVisible: false,
				pageTotal: 0,
				form: {},
				idx: -1,
				id: -1,
				activeName: 'first',
				tableDataCopy: [],
				childTableData: []
			};
		},
		activated() {
			this.getData();
		},
		mounted() {
			this.getData();
		},
		methods: {
			tabClick({
				index
			}) {
				if (index == 1) {
					this.tableData = this.childTableData
				} else {
					this.tableData = this.tableDataCopy
				}
			},
			handleSizeChange(val) {
				this.$set(this.query, 'pageSize', val);
				this.getData();
			},
			async getData() {
				const res = await this.$get('/admin/questionType/getQuestionSort', this.query)
				if (res.code == 1000) {
					this.tableDataCopy = res.data;
					this.tableData = res.data;
					this.childTableData = []
					for (let item of res.data) {
						if (item.id == 0 || item.id == 1 || item.id == 2 || item.id == 3 || item.id == 5 || item.id == 6) {
							this.childTableData.push(item)
						}
					}
				}
			},
			// 触发搜索按钮
			handleSearch() {
				this.$set(this.query, 'pageNumber', 1);
				this.getData();
			},
			handleRefresh() {
				this.query.name = ''
				this.handleSearch()
			},
			// 删除操作
			handleDelete(index, row) {
				this.$confirm('确定要删除吗？', '提示', {
					type: 'warning'
				}).then(async () => {
					const res = await this.$post('/admin/questionType/deleteQuestType', {
						id: row.id
					})
					this.$message.success('删除成功');
					this.tableData.splice(index, 1);
				})

			},
			async addQuestionSort() {
				const res = await this.$post('/admin/questionType/saveQuestionType', {
					id: this.form.id,
					name: this.form.name,
					sort: this.form.sort
				})
				if (res.code == 1000) {
					this.editVisible = false;
					this.getData();
				}
			},
			// 编辑操作
			handleEdit(index, row) {
				this.idx = index;
				this.form = JSON.parse(JSON.stringify(row));
				this.editVisible = true;
			},

			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageNumber', val);
				this.getData();
			}
		}
	};
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 100px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}
</style>